<template>
  <DialogButton
    :submit-loading="addLoading"
    :button-text="Data.addBoard.dialogButtonText"
    :dialog-title="Data.addBoard.dialogTitle"
    :submit-function="Data.addBoard.submitFunction"
    :function-ok="Data.functionOk"
    @dialog-close="Data.functionOk = false"
  >
    <template #body>
      <el-form
        v-loading="loading"
        :model="Data.addBoard.addQuery"
        label-width="auto"
        :rules="addRules"
        style="max-width: 600px"
      >
        <!-- <el-form-item
          label="选择图标"
        >
          <img-upload v-model="Data.addBoard.addQuery.icon" />
        </el-form-item> -->
        <el-form-item
          label="选择图片"
        >
          <img-upload v-model="Data.addBoard.addQuery.pic" />
        </el-form-item>
        <el-form-item
          label="专题名称"
          prop="name"
        >
          <el-input
            v-model="Data.addBoard.addQuery.name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="专题描述"
        >
          <el-input
            v-model.number="Data.addBoard.addQuery.description"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <!-- <el-form-item -->
        <!-- label="板块类型" -->
        <!-- > -->
        <!-- <el-select -->
        <!-- v-model="Data.addBoard.addQuery.type" -->
        <!-- style="width: 240px" -->
        <!-- > -->
        <!-- <el-option -->
        <!-- v-for="item in options" -->
        <!-- :key="item.value" -->
        <!-- :label="item.label" -->
        <!-- :value="item.value" -->
        <!-- /> -->
        <!-- </el-select> -->
        <!-- </el-form-item> -->
        <!-- WARN: 需要 sort --->
      </el-form>
    </template>
  </DialogButton>
</template>
<script setup>
import * as api from '@/api/point/board.js'
import DialogButton from '@/components/DialogButton.vue'

const addLoading = ref(false)
const Data = reactive({
  addBoard: {
    dialogButtonText: '创建话题',
    dialogTitle: '创建话题',
    submitFunction: () => {
      addLoading.value = true
      // 重新构造imgUrl
      // Data.addBoard.addQuery.imgUrl = `${import.meta.env.VITE_APP_BASE_API}/mall4cloud${Data.addBoard.addQuery.imgUrl}`
      if (Data.addBoard.addQuery.sort !== null && Data.addBoard.addQuery.name) {
        api.addBoard(
          Data.addBoard.addQuery
        ).then(() => {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
          addLoading.value = false
          Data.functionOk = true
          emits('workEnd')
        }).catch(() => {
          ElMessage.error('操作失败')
          addLoading.value = false
        })
      } else {
        ElMessage.error('至少填写板块名称')
        addLoading.value = false
      }
    },
    addQuery: {
      icon: '',
      pic: '',
      name: '',
      description: '',
      type: 1, // 0=活动板块，1=粉丝圈板块
      sort: 0
    }
  },
  functionOk: false
})

// const options = [
//   {
//     value: 0,
//     label: '活动板块'
//   },
//   {
//     value: 1,
//     label: '粉丝圈板块'
//   }
// ]

const addRules = {
  name: [
    { required: true, message: '请填写板块名称', trigger: 'blur' }
  ]
}

const emits = defineEmits(['workEnd'])
</script>
